<template>
  <div class="about-container">
    <a-card title="关于 tds-ec-web" :bordered="false">
      <a-descriptions title="应用信息" bordered>
        <a-descriptions-item label="应用名称">tds-ec-web</a-descriptions-item>
        <a-descriptions-item label="技术栈">Vue3 + Vite + Ant Design Vue</a-descriptions-item>
        <a-descriptions-item label="运行模式">
          <a-tag :color="isQiankun ? 'blue' : 'green'">
            {{ isQiankun ? '微应用模式' : '独立运行' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="端口">9092</a-descriptions-item>
        <a-descriptions-item label="版本">1.0.0</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-badge status="success" text="运行中" />
        </a-descriptions-item>
      </a-descriptions>
      
      <a-divider />
      
      <a-timeline>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>应用初始化完成</p>
          <p>时间: {{ initTime }}</p>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>qiankun 生命周期配置完成</p>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>路由系统配置完成</p>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>Ant Design Vue 组件库集成完成</p>
        </a-timeline-item>
      </a-timeline>
    </a-card>
  </div>
</template>

<script setup>
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

// 响应式数据
const initTime = ref('')

// 计算属性
const isQiankun = computed(() => {
  return qiankunWindow.__POWERED_BY_QIANKUN__
})

// 生命周期
onMounted(() => {
  initTime.value = new Date().toLocaleString()
})
</script>

<style lang="scss" scoped>
.about-container {
  padding: 24px;
  
  .ant-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style> 